import ScrollBarLayout from '@/components/ScrollBarLayout';
import { Descriptions, Drawer, Empty, Spin } from 'antd';
import { useEffect } from 'react';
import { ContacterAPI } from '../common/type';
import { getContacterService } from '../services';
import pageStyles from '@/common/pageLayout.less';
import MyIcon from '@/components/MyIcon';
import { getColorTextLoadMap, renderRegionText } from '@/utils';

const DesItem = Descriptions.Item;

// const getContacterInfo: Record<string, any> = {
//   id: 1,
//   fullName: '薛仁',
//   phoneMobile: '17596969696',
//   phoneOffice: '17596915151',
//   phoneSpare: '17512341234',
//   isFirst: '0',
//   provinceCodeName: '河南',
//   cityCodeName: '洛阳',
//   countyCodeName: '龙门石窟',
//   sex: '1',
//   nationTypeName: '汉族||#8b572a',
//   politicalTypeName: '党员||#636363',
//   cardTypeName: '身份证||#d0021b',
//   cardNum: '411528201106046512',
//   educateLevelName: '大学本科||#636363',
//   companyName: '北京学森科技有限公司',
//   deptName: '技术研发部门',
//   positionName: '技术研发',
//   emailNum: '75945612@qq.com',
//   qqNum: '75945612',
//   wechatNum: 'wx1759696999',
//   birthday: '2000-06-20 16:14:12',
//   profileInfo:
//     '1964年9月10日生于浙江省杭州市，祖籍浙江省嵊州市谷来镇， 阿里巴巴集团主要创始人。现任日本软银董事、大自然保护协会中国理事会主席兼全球董事会成员、华谊兄弟董事、生命科学突破奖基金会董事、联合国数字合作高级别小组联合主席，香港大学荣誉教授',
//   hobby: '篮球,乒乓球',
//   addressInfo: '北京市海淀区南福寺路',
//   createType: '1',
//   createTime: '2022-02-13',
// };

export const DetailDrawerView: React.FC<ContacterAPI.IDetailDrawerView> = ({ visible, checkRows, onCloceDrawer }) => {
  /**
   * 引入详情接口
   */
  const { getContacterLoading, getContacterRun } = getContacterService(() => {});

  const getContacterInfo = checkRows;

  useEffect(() => {
    if (checkRows && checkRows?.id && visible) {
      let infoPayload: any = {
        id: checkRows?.id,
      };
      getContacterRun(infoPayload);
    }
  }, [visible, checkRows]);

  return (
    <>
      <Drawer
        open={visible}
        onClose={onCloceDrawer}
        title={<div>联系人详情</div>}
        style={{ position: 'absolute' }}
        placement="right"
        getContainer={false}
        width={document.body?.clientWidth * 0.4}
        headerStyle={{
          padding: '.5rem',
        }}
        bodyStyle={{
          padding: 0,
        }}
        closable={false}
        destroyOnClose={true}
      >
        <ScrollBarLayout style={{ padding: 10 }}>
          <div style={{ display: visible ? 'block' : 'none' }}>
            <Spin spinning={getContacterLoading}>
              {getContacterInfo && getContacterInfo?.id ? (
                <>
                  {/* <TypographyTitle
                      level={4}
                      style={{
                        margin: '0px 0px 10px',
                      }}
                    >
                      基本信息
                    </TypographyTitle> */}
                  <div className={pageStyles['detailDrawerDes']}>
                    <Descriptions bordered={true} size="small" column={4}>
                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-kehuguanli" />
                            &nbsp;&nbsp;归属供应商
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.supplierName) || '--'}
                      </DesItem>
                      {/* <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-solution1" />
                            &nbsp;&nbsp;归属人
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.ownerName) || '--'}
                      </DesItem> */}
                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="lianxiren" />
                            &nbsp;&nbsp;姓名
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.fullName) || '--'}
                      </DesItem>
                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="waihu2" />
                            &nbsp;&nbsp;手机号码
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.phoneMobile) || '--'}
                      </DesItem>
                      <DesItem
                        span={2}
                        label={
                          <span>
                            {getContacterInfo?.sex == 1 ? (
                              <MyIcon type="icon-man" />
                            ) : getContacterInfo?.sex == 2 ? (
                              <MyIcon type="icon-woman" />
                            ) : (
                              <MyIcon type="icon-sex" />
                            )}
                            &nbsp;&nbsp;性别
                          </span>
                        }
                      >
                        <span
                          style={{
                            color:
                              getContacterInfo?.sex == 1
                                ? '#096dd9'
                                : getContacterInfo?.sex == 2
                                ? '#fd018b'
                                : getContacterInfo?.sex == 0
                                ? '#faad14'
                                : '',
                          }}
                        >
                          {getContacterInfo && getContacterInfo?.sex == 1
                            ? '男'
                            : getContacterInfo && getContacterInfo?.sex == 2
                            ? '女'
                            : '未知'}
                        </span>
                      </DesItem>
                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-star" />
                            &nbsp;&nbsp;是否首要
                          </span>
                        }
                      >
                        {getContacterInfo?.isFirst == 0 ? (
                          <span style={{ color: '#ff4000' }}>否</span>
                        ) : getContacterInfo?.isFirst == 1 ? (
                          <span style={{ color: '#52c41a' }}>是</span>
                        ) : (
                          '--'
                        )}
                      </DesItem>
                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-shouji" />
                            &nbsp;&nbsp;备用手机
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.phoneSpare) || '--'}
                      </DesItem>
                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-phone1" />
                            &nbsp;&nbsp;办公电话
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.phoneOffice) || '--'}
                      </DesItem>
                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="youxiang1" />
                            &nbsp;&nbsp;邮箱编号
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.emailNum) || '--'}
                      </DesItem>
                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-gongsi" />
                            &nbsp;&nbsp;所在公司
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.companyName) || '--'}
                      </DesItem>
                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-bumen" />
                            &nbsp;&nbsp;所在部门
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.deptName) || '--'}
                      </DesItem>
                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-zhiwei" />
                            &nbsp;&nbsp;当前职务
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.positionName) || '--'}
                      </DesItem>

                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-quyu" />
                            &nbsp;&nbsp;所在区域
                          </span>
                        }
                      >
                        {renderRegionText(getContacterInfo)}
                      </DesItem>

                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-minzu" />
                            &nbsp;&nbsp;民族
                          </span>
                        }
                      >
                        <span
                          style={{
                            color: getContacterInfo?.nationTypeName
                              ? getColorTextLoadMap(getContacterInfo?.nationTypeName)?.color
                              : '',
                          }}
                        >
                          {(getContacterInfo && getColorTextLoadMap(getContacterInfo?.nationTypeName)?.colorText) || '--'}
                        </span>
                      </DesItem>

                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-zhengzhi" />
                            &nbsp;&nbsp;政治面貌
                          </span>
                        }
                      >
                        <span
                          style={{
                            color: getContacterInfo?.politicalTypeName
                              ? getColorTextLoadMap(getContacterInfo?.politicalTypeName)?.color
                              : '',
                          }}
                        >
                          {(getContacterInfo && getColorTextLoadMap(getContacterInfo?.politicalTypeName)?.colorText) || '--'}
                        </span>
                      </DesItem>

                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-xueli" />
                            &nbsp;&nbsp;最高学历
                          </span>
                        }
                      >
                        <span
                          style={{
                            color: getContacterInfo?.educateLevelName
                              ? getColorTextLoadMap(getContacterInfo?.educateLevelName)?.color
                              : '',
                          }}
                        >
                          {(getContacterInfo && getColorTextLoadMap(getContacterInfo?.educateLevelName)?.colorText) || '--'}
                        </span>
                      </DesItem>

                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-shengri" />
                            &nbsp;&nbsp;出生日期
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.birthday?.split(' ')?.[0]) || '--'}
                      </DesItem>

                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-QQ" />
                            &nbsp;&nbsp;QQ号码
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.qqNum) || '--'}
                      </DesItem>

                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-wechat-fill" />
                            &nbsp;&nbsp;微信号码
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.wechatNum) || '--'}
                      </DesItem>
                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-zhengjian" />
                            &nbsp;&nbsp;证件类型
                          </span>
                        }
                      >
                        <span
                          style={{
                            color: getColorTextLoadMap(getContacterInfo?.cardTypeName)?.color,
                          }}
                        >
                          {getContacterInfo?.cardTypeName ? getColorTextLoadMap(getContacterInfo?.cardTypeName)?.colorText : '--'}
                        </span>
                      </DesItem>
                      <DesItem
                        span={2}
                        label={
                          <span>
                            <MyIcon type="icon-shebeishuliang" />
                            &nbsp;&nbsp;证件号码
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.cardNum) || '--'}
                      </DesItem>
                      <DesItem
                        span={4}
                        label={
                          <span>
                            <MyIcon type="icon-souhuodizhi" />
                            &nbsp;&nbsp;住址
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.addressInfo) || '--'}
                      </DesItem>
                      <DesItem
                        span={4}
                        label={
                          <span>
                            <MyIcon type="icon-iconfront-" />
                            &nbsp;&nbsp;个人简介
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.profileInfo) || '--'}
                      </DesItem>

                      <DesItem
                        span={4}
                        label={
                          <span>
                            <MyIcon type="icon-aihao" />
                            &nbsp;&nbsp;兴趣爱好
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.hobby) || '--'}
                      </DesItem>

                      <DesItem
                        span={4}
                        label={
                          <span>
                            <MyIcon type="icon-beizhu" />
                            &nbsp;&nbsp;备注
                          </span>
                        }
                      >
                        {(getContacterInfo && getContacterInfo?.remark) || '--'}
                      </DesItem>
                    </Descriptions>
                  </div>
                </>
              ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
              )}
            </Spin>
          </div>
        </ScrollBarLayout>
      </Drawer>
    </>
  );
};
